<template>
  <div class="Profile-general-base">
    <div class="Profile-general-base-title">
       基本信息
    </div>
    <div class="Profile-general-base-info">
      <div class="Profile-general-base-info-nickname">
        <div style="width: 100px;">用户昵称</div>
        <el-input  v-model="userinfo.nickname" class="editInfo" ></el-input>
      </div>
      <div class="Profile-general-base-info-userId">
        <div style="width: 100px;">用户ID</div>
        <el-input  v-model="userinfo.userInfoId"  :disabled="true" class="editInfo"></el-input>
      </div>
      <div class="Profile-general-base-info-gender">
        <div style="width: 100px;">性别 </div>
        <el-radio v-model="userinfo.gender" label="1" style="line-height: 50px;margin-left: 15px" class="editInfo">男</el-radio>
        <el-radio v-model="userinfo.gender" label="2" style="line-height: 50px" class="editInfo">女</el-radio>
      </div>
      <div class="Profile-general-base-info-selfInfo">
        <div style="width: 100px;">个人简介 </div>
        <el-input  v-model="userinfo.content" type="textarea"   maxlength="200"
                   placeholder="未填写" class="editInfo">
        </el-input>
      </div>
      <div class="Profile-general-base-info-area" >
        <div style="width: 100px;">所在地区 </div>
        <el-input  v-model="userinfo.area" placeholder="未填写"  class="editInfo"></el-input>
      </div>
      <div class="Profile-general-base-info-birth">
        <div style="width: 100px;">出生日期 </div>
        <el-date-picker
            style="margin-left: 5px;"
            v-model="userinfo.birth"
            type="date"
            placeholder="出生日期" class="editInfo">
        </el-date-picker>
      </div>
      <div class="Profile-general-base-info-work">
        <div style="width: 100px;">开始工作 </div>
        <el-date-picker
            style="margin-left: 5px"
            v-model="userinfo.workTime"
            type="date"
            placeholder="开始工作时间" class="editInfo">
        </el-date-picker>
      </div>
      <div class="ProfileConfirm" v-show="showSaveButton">
        <div class="Profile-general-base-info-confim" style="display: flex; justify-content: center">
          <el-button  type="danger" plain @click="saveBaseInfo">保存</el-button>
          <el-button  plain @click="hideSaveButton">取消</el-button>
        </div>
      </div>


    </div>


  </div>
</template>

<script>



import {updateUserInfo} from "@/api/user";
export default {
  name: "ProfileGeneralBase",
  data(){
    return{
      user:{
          nickname:localStorage.getItem("nickname"),
      },
      showSaveButton:false
    }
  }
  ,props:["userinfo"],
  mounted() {
           this.show();
  },
  methods:{
      show(){
        var name= document.getElementsByClassName("editInfo")
           for (var i=0;i<name.length;i++){
                 name[i].onclick=()=>{
                      this.showSaveButton=true;
                 }
           }


      },
    hideSaveButton(){
      this.showSaveButton=false;
      location.reload();
    },
    saveBaseInfo(){
      updateUserInfo(this.userinfo)
      this.showSaveButton=false;
    }
  }
}
</script>

<style>
.Profile-general-base{
  width: 100%;
  height: fit-content;
}
.Profile-general-base-title{
  font-size: 18px;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
}
.Profile-general-base-info{
  width: 100%;
  height: 100%;
  padding: 16px 58px 16px 15px;
  display: flex;
  flex-direction: column;
}
.Profile-general-base-info > div{
  height: fit-content;
  display: flex;
  align-content: center;
  font-size: small;
  margin-top: 20px;

}
.Profile-general-base-info > div >div{
  line-height: 50px;
}
.Profile-general-base-info .el-input__inner{
  width: 300px;
  margin-left: 10px;
  border:none ;
  font-weight: normal;
}
/*.Profile-general-base-info .el-input__inner  ~ .ProfileConfirm{*/
/*  display: block !important;*/
/*}*/
.el-textarea{
  width: 400px;
  position: relative;


}

.el-textarea__inner{
height: 100px;
  width: 400px;
  resize: none;
  border:none ;
  padding-top: 15px;
  overflow: hidden;
}
.ProfileConfirm{
  width: 100%;
  height: fit-content;
  justify-content: center;
  /*display: none !important;*/
}



</style>